<template>
  <div class="my-layout min-h-screen">
    <nav class="fixed z-30 w-full border-b bg-base-100">
      <div class="px-3 py-3 lg:px-5 lg:pl-3">
        <div class="flex items-center justify-between">
          <div class="flex items-center justify-start">
            <button
              class="cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 lg:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:bg-gray-700 dark:focus:ring-gray-700"
              @click="sideMenuShow = !sideMenuShow"
            >
              <svg
                class="h-6 w-6"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <ZDrawer v-model="sideMenuShow">
              <div class="h-full w-64 bg-base-100 p-4">
                <ZMenu class="w-full" :items="items" @selected="onMenuSelected">
                </ZMenu>
              </div>
            </ZDrawer>
            <RouterLink class="ml-2 flex md:mr-24" to="/">
              <span class="icon-[uil--blogger] h-10 w-10 text-primary"></span>
              <span
                class="hidden self-center whitespace-nowrap text-xl font-semibold sm:block sm:text-2xl"
              >
                Blog
              </span>
            </RouterLink>
            <SearchButton
              path-name="my.edit-post"
              query-url="/user/posts?title"
            >
            </SearchButton>
          </div>
          <div class="flex items-center">
            <div class="-mb-1 mr-3 hidden sm:block">
              <span></span>
            </div>

            <SwitchTheme />

            <ZDropDown>
              <img
                class="h-8 w-8 rounded-full"
                :src="userStore.avatar"
                alt="user photo"
              />
              <template #dropdown>
                <div class="bg-base-200">
                  <div class="border border-accent text-primary">
                    <h3>{{ userStore.user?.nickname }}</h3>
                  </div>
                  <ZMenu :items="items" @selected="onMenuSelected"> </ZMenu>
                </div>
              </template>
            </ZDropDown>
          </div>
        </div>
      </div>
    </nav>

    <div class="flex min-h-full overflow-hidden pt-16">
      <aside
        class="transition-width fixed left-0 top-0 z-20 hidden h-full w-64 flex-shrink-0 flex-col pt-16 font-normal duration-75 lg:flex"
      >
        <div
          class="relative flex min-h-0 flex-1 flex-col border-r border-base-200 pt-0"
        >
          <div class="flex flex-1 flex-col overflow-y-auto px-4 pt-5">
            <ul class="side-menu space-y-2 pb-2">
              <li>
                <RouterLink to="/my">
                  <span class="icon-[uil--chart-pie-alt] h-6 w-6"></span>
                  <span>仪表盘</span>
                </RouterLink>
              </li>
              <li>
                <RouterLink to="/my/new">
                  <span class="icon-[uil--file-plus-alt] h-6 w-6"></span>
                  <span>新建博客</span>
                </RouterLink>
              </li>
              <li>
                <RouterLink to="/my/tags">
                  <span class="icon-[uil--tag-alt] h-6 w-6"></span>
                  <span>标签管理</span>
                </RouterLink>
              </li>
              <li>
                <RouterLink to="/my/resume">
                  <span class="icon-[uil--clipboard-notes] h-6 w-6"></span>
                  <span>简历管理</span>
                </RouterLink>
              </li>
              <li>
                <RouterLink to="/">
                  <span class="icon-[uil--blogger] h-6 w-6"></span>
                  <span> 返回首页</span>
                </RouterLink>
              </li>
            </ul>
          </div>
        </div>
      </aside>
      <div class="relative h-full w-full overflow-y-auto bg-base-100 lg:ml-64">
        <main class="h-full px-4 pt-6">
          <RouterView #="{ Component }">
            <KeepAlive>
              <component :is="Component" />
            </KeepAlive>
          </RouterView>
        </main>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import ZDrawer from "@/components/ZDrawer.vue";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();
const router = useRouter();

const items = [
  { key: "my.index", label: "仪表盘", icon: "icon-[uil--chart-pie-alt]" },
  { key: "my.new-post", label: "新建博客", icon: "icon-[uil--file-plus-alt]" },
  { key: "my.tags", label: "标签管理", icon: "icon-[uil--tag-alt]" },
  { key: "home", label: "返回首页 ", icon: "icon-[uil--blogger]" },
];

const onMenuSelected = (name: string) => {
  router.push({ name });
  sideMenuShow.value = false;
};

const sideMenuShow = ref(false);
</script>
<style>
ul.side-menu li a {
  @apply flex items-center gap-4 p-2 text-base hover:rounded-md hover:bg-base-300;
}
</style>
